<template>
    <div class="login_contianer">
        <!--      登录框-->
        <div class="login">
            <!--        头像-->
            <div class="user">
                <img src="../../assets/images/user.jpg" alt="">
            </div>
            <!--       登录提示 -->
            <div class="tishi">
                <div>账号：admin 密码：123456</div>
                <div>账号：user 密码：123456</div>
            </div>
            <!--        登录表单-->
            <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" class="demo-ruleForm">
                <el-form-item  class="username" prop="username">
                    <el-input placeholder="请输入账号" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="info" class="btns" @click="resetForm">重置</el-button>
            <el-button type="primary" class="btns" @click="login">登录</el-button>
        </div>
    </div>
</template>

<script>
import {Toast} from "mint-ui";

export default {
    data () {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            loginFormRules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        resetForm () {
            this.$refs.loginFormRef.resetFields()
        },
        login () {
            this.$refs.loginFormRef.validate(valid => {
                if (!valid) {
                    return Toast('请输入正确的账号密码格式！')
                }
                else {
                    if (this.loginForm.username == 'admin' && this.loginForm.password == '123456') {
                        Toast('登录成功！')
                        this.$router.push('/container')
                    }
                    else {
                        if (this.loginForm.username == 'user' && this.loginForm.password == '123456') {
                            Toast('登录成功！')
                            this.$router.push('/container')
                        }
                        else {
                            Toast('登录失败！')

                        }
                    }
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .login_contianer{
        background: url("../../assets/images/login.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
    }
    .login{
        width: 80%;
        height: 70%;
        /*border: 1px solid #fff;*/
        position: absolute;
        top: 20%;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 5%;
    }
    .user{
        width: 25%;
        height: 20%;
        margin-left: 50%;
        margin-bottom: 5%;
        transform: translateX(-50%);
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .tishi{
        text-align: center;
        font-size: 18px;
        color: red;
        margin-bottom: 18px;
    }
    .btns{
        margin-top: 10px;
        float: right;
        margin-left: 10px;
    }
</style>
